<template>
  <div class="app-container">
    <el-card style="position: relative">
      <RouterHeader
        :title="title()"
        :time="time"
        :status="status"
      ></RouterHeader>
      <div class="concent">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleFormRef"
          label-width="140px"
          label-position="right"
        >
          <div class="concent-title">{{ content }}</div>
          <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="form.todayTask"
            show-word-limit
            rows="5"
            disabled
          >
          </el-input>
          <div class="concent-title">{{ plan }}</div>
          <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="form.tomorrowTask"
            show-word-limit
            rows="5"
            disabled
          >
          </el-input>
          <div class="concent-title">需协调工作</div>
          <el-input
            placeholder="请输入内容"
            type="textarea"
            v-model="form.needAssiistTask"
            show-word-limit
            rows="5"
            disabled
          >
          </el-input>
          <div class="concent-title">上传附件/图片</div>

          <fileupload
            :modelValue="form.projectFileList"
            @update:modelValue="handleModelValueFiles"
            :flag="
              route.query.name === '6' ||
              route.query.name === '3' ||
              route.query.name === '5'
                ? true
                : false
            "
          ></fileupload>

          <!-- <div v-if="form.dataCheckInfo.procesCheckState === '1'">
            <div class="concent-title">评审栏</div>
            <el-input
              type="textarea"
              v-model="form.procesCheckState"
              show-word-limit
              rows="5"
            >
            </el-input>
            <div style="display: flex; justify-content: flex-end; width: 100%">
              <el-button type="primary" style="margin-top: 10px"
              @click="releaseSave"
                >发布</el-button
              >
            </div>
          </div> -->

          <!-- <div class="concent-title">评审意见</div>
          <el-divider />
          <div v-for="item in form.dataCheckInfo.opinons" :key="item" class="custom-concent">
            <div class="custom-wrapper">
              <img :src="url + item.avatar" class="custom-avatar" />
            </div>
            <div class="custom-text">
              <div style="display: flex; justify-content: space-between">
                <div class="text-top">
                  <span
                    style="font-size: 12px; font-weight: bold; color: #ff8200"
                    >{{ item.username }}：</span
                  >
                  <div class="custom-replay">{{ item.deptName }}</div>
                </div>

                <div class="text-bottom">
                  <div class="text-time">
                    发布于：{{ formatDate(item.createTime) }}
                  </div>
                </div>
              </div>
              <span style="color: #939393; font-size: 14px"
                >意见：{{ item.opinion }}</span
              >
            </div>
          </div> -->
          <div class="concent-title">已查看</div>
          <el-divider />
          <div style="display: flex">
            <div
              v-for="item in form.dataCheckInfo.looked"
              :key="item"
              class="custom-concent"
            >
              <img :src="url + item.avatar" class="custom-avatar" />
              <div style="font-weight: bold; font-size: 14px">
                {{ item.nickName }}
              </div>
            </div>
          </div>

          <div v-if="route.query.name !== '1'">
            <div class="title"><h5>项目审批进度</h5></div>
            <el-timeline style="max-width: 600px">
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :color="activity.color"
                :timestamp="activity.updateTime"
              >
                <div style="display: flex; align-items: center">
                  <img :src="url + activity.avatar" class="user-avatar" />

                  <span
                    style="font-size: 14px; font-weight: 500; margin-left: 5px"
                  >
                    {{ activity.username }}

                    ({{
                      activity.checkHisResult === "2" ? "未审核" : "已审核"
                    }})
                    {{
                      activity.zuofei === "0"
                        ? " _作废"
                        : activity.zuofei === "null"
                        ? ""
                        : ""
                    }}
                    :</span
                  >

                  <span
                    style="font-size: 14px; font-weight: 400; margin-left: 5px"
                  >
                    {{ activity.opinion }}</span
                  >
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
          <el-row v-if="route.query.name === '6'">
            <el-col :span="24">
              <el-form-item label="审批方式">
                <el-radio-group
                  v-model="form.processCheckBo.checkType"
                  disabled
                >
                  <el-radio :label="0">自由审批</el-radio>
                  <el-radio :label="1">逐级审批</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item
                label="审批流程"
                style="padding: 20px 0"
                v-if="
                  form.processCheckBo.checkType !== 1 && form.keepCheck === '1'
                "
              >
                <approvers
                  v-if="form.processCheckBo.checkType !== 1"
                  :approverList="form.processCheckBo.checkPeopleIds"
                  :typeId="3"
                  :isEdit="!!$route.query.projectId"
                  @handleChooseapprover="handleChooseapprover"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="抄送"
                style="padding: 20px 0"
                v-if="
                  form.processCheckBo.checkType !== 1 && form.keepCheck === '1'
                "
              >
                <approvers
                  :typeId="3"
                  :approverList="form.processCheckBo.copyFor"
                  :isCc="true"
                  @handleChooseapprover="handleChooseapproverCc"
                ></approvers>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="route.query.name === '6' || route.query.name === '5'">
            <el-col :span="24">
              <el-form-item label="审批意见" prop="projectImplementation">
                <el-input
                  class="input-item"
                  type="textarea"
                  :autosize="{ minRows: 2 }"
                  maxlength="150"
                  show-word-limit
                  v-model="form.approvalOpinions"
                  placeholder="请输入"
                  :disabled="route.query.name === '5' ? true : false"
                ></el-input>
              </el-form-item>
              <el-form-item label="审批附件" prop="projectImplementation">
                <fileupload
                  @update:modelValue="approvalFilesAdd"
                  :modelValue="form.approvalFiles"
                ></fileupload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="审批决定"
                prop="projectImplementation"
                v-if="form.processCheckBo.checkType !== 1"
              >
                <el-radio-group
                  v-model="form.keepCheck"
                  class="ml-4"
                  :disabled="route.query.name === '5' ? true : false"
                >
                  <el-radio label="0" size="large">完成审批</el-radio>
                  <el-radio label="1" size="large">继续审批</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div
            style="display: flex; justify-content: center"
            v-if="route.query.name === '6'"
          >
            <el-button @click="resetForm(ruleFormRef)">驳回</el-button>
            <el-button type="primary" @click="submitForm(ruleFormRef)"
              >通过</el-button
            >
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
import RouterHeader from "@/components/RouterHeader";
import { useRouter, useRoute } from "vue-router";
import selectPeople from "@/components/selector/selectPeople.vue";
import approver from "./approver";
import { reportAdd } from "@/api/information/daily";
import { ElMessageBox, ElMessage } from "element-plus";
import { dailyDetails } from "@/api/information/daily";
import { formatDate } from "@/utils/index";
import approvers from "@/components/Approve/approver.vue";
import { approvalProcessApi } from "@/api/approvalManagement/approvaType.js";
import fileupload from "@/components/FileUpload";
const router = useRouter();
const route = useRoute();
let url = import.meta.env.VITE_APP_BASE_API;
const radio1 = ref("2");

// 要考虑到是我的日报跳进来的，还是成员日报跳进来的
const title = () => {
  if (route.query.statu === "my" || route.query.myDataCheck) {
    if (route.query.type === "1") {
      return "我的日报";
    } else if (route.query.type === "2") {
      return "我的周报";
    } else {
      return "我的月报";
    }
  } else {
    if (route.query.type === "1") {
      return "成员日报";
    } else if (route.query.type === "2") {
      return "成员周报";
    } else {
      return "成员月报";
    }
  }
};

const content = ref("");
const activities = ref([]);
const handelContent = () => {
  if (route.query.type === "1") {
    return (content.value = "今日完成工作");
  } else if (route.query.type === "2") {
    return (content.value = "本周完成工作");
  } else {
    return (content.value = "本月工作总结");
  }
};
const plan = ref("");

const handelPlan = () => {
  if (route.query.type === "1") {
    return (plan.value = "明日工作计划");
  } else if (route.query.type === "2") {
    return (plan.value = "下周工作计划");
  } else {
    return (plan.value = "下月工作计划");
  }
};

let time = ref("");
let status = ref("");

const ruleFormRef = ref();

const form = reactive({
  todayTask: "",
  tomorrowTask: "",
  needAssiistTask: "",
  projectFileList: [],
  dataCheckInfo: {
    procesCheckState: "", //评审栏
    //opinons: [], //评审意见
    looked: [], //已查看
  },
  processCheckBo: {
    checkPeopleIds: [], //审核人id列表
    copyFor: [], //抄送人id列表
    checkType: 1,
  },
  approvalOpinions: "", // 审批意见
  processCheckHistoryId: "",
  approvalFiles: [],
  keepCheck: "1", //审批决定-继续审批
});

// 查看详情
const dailyDetailsData = async () => {
  // 获取当前页面的 URL
  // var currentURL = window.location.href;

  // // 获取查询字符串
  // var queryString = window.location.search;

  // // 解析查询参数
  // var searchParams = new URLSearchParams(queryString);
  // // 获取特定参数的值
  // var parameterValue = searchParams.get("id");

  const response = await dailyDetails(route.query.id);

  if (response.code === 200 && response.data) {
    for (let key in form) {
      if (response.data[key]) {
        form[key] = response.data[key];
      }
    }
    time.value = response.data.taskDate;

    status.value = response.data.submited === "1" ? "已提交" : "未提交";

    // 审批进度列表
    activities.value = response.data.dataCheckInfo.opinons;

    form.processCheckBo.checkType =
      response.data &&
      response.data.dataCheckInfo &&
      response.data.dataCheckInfo.checkType;
    form.processCheckHistoryId =
      response.data.dataCheckInfo.processCheckHistoryId;
    if (route.query.name === "5") {
      form.approvalOpinions =
        response.data &&
        response.data.dataCheckInfo &&
        response.data.dataCheckInfo.myCheckOpinionBo &&
        response.data.dataCheckInfo.myCheckOpinionBo.opinion;
      form.approvalFiles =
        response.data &&
        response.data.dataCheckInfo &&
        response.data.dataCheckInfo.myCheckOpinionBo &&
        response.data.dataCheckInfo.myCheckOpinionBo.fileList;
      // 审批决定
      form.keepCheck =
        response.data &&
        response.data.dataCheckInfo &&
        response.data.dataCheckInfo.myCheckOpinionBo &&
        response.data.dataCheckInfo.myCheckOpinionBo.keepCheck;
    }
  }
};
// 审批人
const handleChooseapprover = (id) => {
  if (id) {
    form.processCheckBo.checkPeopleIds = id;
  }
};
// 抄送人
const handleChooseapproverCc = (id) => {
  if (id) {
    form.processCheckBo.copyFor = id;
  }
};

// 发布
const releaseSave = () => {
  // let params=
};
// 审批附件
const approvalFilesAdd = (val, result, operationType) => {
  if (operationType === "success") {
    if (result) {
      form.approvalFiles = [];
      result.forEach((item)=>{
        form.approvalFiles.push(item);
      });
    }
  } else if (operationType === "delete") {
    form.approvalFiles.splice(result, 1);
  }
};
// 驳回
const resetForm = async () => {
  let data = {
    checkOpinion: form.approvalOpinions,
    id: form.processCheckHistoryId,
    copyFor: form.processCheckBo.copyFor.map((item) => item.userId),
    keepCheckId: form.processCheckBo.checkPeopleIds.map((item) => item.userId),
    state: "0",
    fileList: form.approvalFiles,
    keepCheck: form.keepCheck,
  };
  const res = await approvalProcessApi(data);
  if (res.code === 200) {
    ElMessage.success("审批已驳回");
    router.go(-1);
  }
};
// 通过
const submitForm = async () => {
  let data = {
    checkOpinion: form.approvalOpinions,
    id: form.processCheckHistoryId,
    copyFor: form.processCheckBo.copyFor.map((item) => item.userId),
    keepCheckId: form.processCheckBo.checkPeopleIds.map((item) => item.userId),
    state: "1",
    fileList: form.approvalFiles,
    keepCheck: form.keepCheck,
  };
  const res = await approvalProcessApi(data);
  if (res.code === 200) {
    ElMessage.success("审批通过");
    router.push({
      path: "/examine",
    });
  }
};

onMounted(async () => {
  await handelContent();
  await handelPlan();
  if (route.query.time || route.query.state) {
    time.value = route.query.time;
    status.value = route.query.state;
    // console.log(status.value);
  }
  await dailyDetailsData();
});
</script>
<style lang="scss" scoped>
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.concent {
  margin-top: 10px;
  .concent-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 20px;
  }
}
.custom-avatar {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.custom-concent {
  display: flex;
  margin-top: 8px;
  // align-items: center; /* 垂直居中 */
  flex-direction: column; /* 将主轴方向设置为垂直方向 */
  flex-wrap: wrap; /* 允许项目自动换行 */

  margin-bottom: 20px;
  margin-right: 20px;
  .custom-text {
    width: 100%;
    margin-left: 10px;

    .text-top {
      display: flex;
    }
    .custom-replay {
      font-size: 12px;
      font-weight: bold;
      color: #ff8200;
    }
    .text-bottom {
      display: flex;
      justify-content: space-between;

      .text-reply {
        display: flex;
      }
      .text-reply:hover {
        color: #ff8200;
      }
      .text-time {
        color: #939393;
        font-size: 12px;
      }
    }
  }
}
.circle-container {
  display: flex;
  align-items: center;
  margin-top: -15px;
  flex-wrap: wrap;
}

.circle {
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px; /* 圆的宽度 */
  height: 50px; /* 圆的高度 */
  background-color: #3498db; /* 圆的背景颜色 */
  border-radius: 50%; /* 圆的半径，使其形状为圆 */
}

.circle span {
  color: white; /* 文字的颜色 */
  font-size: 1.2rem; /* 文字的大小 */
}
</style>
